<template>
    <el-header style="background-color: lightgray; text-align: right; font-size: 12px;height: 100px;">
      <el-header style="text-align: right; font-size: 12px;height: 100px;">
      <h1 style="font-size: 30px; text-align: left;">药房发药</h1>
      </el-header>
           <div class="toolbar">
          <div>系统希望您不再是本系统受众，并提醒您务必谨遵医嘱</div>
      
      <div class="sub-title"></div>
  
             <!-- <span>门诊挂号</span> -->
           </div>
         </el-header>
        
       <h3>患者搜索</h3>
            <el-row>
              <el-col :span="10"><div class="grid-content ep-bg-purple-light" />
        <el-form-item label="病历号：" prop="patientName"  class="label">
       <el-select v-model="form.orderNo" placeholder="请选择">
  
       </el-select>
     </el-form-item>
    </el-col>
    <el-col :span="10"><div class="grid-content ep-bg-purple-light" />
        <el-form-item label="姓名：" prop="patientName"  class="label">
       <el-select v-model="form.patientName" placeholder="请选择">
  
       </el-select>
     </el-form-item>
    </el-col>
    <el-col :span="4">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
    </el-col>
  </el-row>
  <h3>患者信息</h3>
    <el-row>
        <el-col :span="6">
        <el-form-item label="姓名：" prop="fangStatus" class="label" >
       <el-select v-model="form.patientName" placeholder="请选择">   
        <el-option label="全部" value="1"></el-option>
        <el-option label="待挂号" value="2"></el-option>
        <el-option label="已挂号" value="3"></el-option>
        <el-option label="已取消" value="4"></el-option>
       </el-select>
       </el-form-item>
       </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号：" prop="identityNo" class="label" >
            <el-input v-model="form.identityNo" label="身份证号"></el-input>
          </el-form-item>    
  
    </el-col>
    <el-col :span="6">
       <el-form-item label="性别：" prop="fangStatus" class="label" >
       <el-select v-model="form.gender" label="性别">
        <el-radio label="男" value="1"></el-radio>
        <el-radio label="女" value="0"></el-radio>
        
       </el-select>
       </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="年龄：" prop="age" class="label" >
        <el-select v-model="form.age" placeholder="请选择" label="年龄">   
       
      </el-select>
      </el-form-item>
   
    </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-statistic class="label" title="项目金额￥￥￥"  :value="outputValue" />
      </el-col>
    </el-row>
  
    <el-main>
        <el-scrollbar>
            <h3>患者消费信息</h3>
          <el-table  :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="150" />
      <el-table-column property="pName" label="病历号" width="200" />
      <el-table-column property="dName" label="项目名称" width="200" />
      <el-table-column property="cStatus" label="单价" width="200" />
      <el-table-column property="oDate" label="数量" width="200" />
      <el-table-column property="oDate" label="开立时间" width="200" />
      <el-table-column property="oDate" label="支付状态" width="200" />
      <el-table-column property="oDate" label="发药状态" width="200" />
    </el-table>
        </el-scrollbar>
        <el-button type="primary" @click="lookOrder">发药</el-button>
      </el-main>
  
  
   </template>
   
   <script lang="ts" setup name="Medicine">
  import axiosInstance from '@/utils/axiosUtils';
  import { ref } from 'vue';
  import { reactive, toRefs } from 'vue'
  import { useTransition } from '@vueuse/core'
  
  const source = ref(0)
  const outputValue = useTransition(source, {
    duration: 1500,
  })
  source.value = 172000
  const tableData =reactive( [{
    
  }
  ])
  const form = reactive({
   orderNo:'',
   patientName:'',
   identityNo:'',
   gender:'',
   age:'',
   checkStatus:1,
   deptName:null,
   orderDate:null,
   pageNum:1,
   pageSize:10,
   total:0,
  
  });
  //清空表单函数
  const resetForm=()=>{
  for(const key in form){
    form[key]='';
  }
  };
  const search=()=>{
  };
  const select=()=>{
  };
  const lookOrder=()=>{
    
  
  };
  const deleteOrder=()=>{
    
  };
  axiosInstance.get("/api/register/getOrderNo?id="+1).then(
  response=>{
    console.log('success'+response.data);
    form.orderNo=response.data;
  }
  ).catch(error=>{
  console.log('error');
  })
  
  
  </script>
  
  
  
  
  
  
  <style lang="css" link-ref="main.css"/>
  <style scoped> 
  h1{
    padding-left: 30px;
    
  }
  .label{
  width: 200px;
   color: grey;
  padding-left: 30px;
  
  }
 
  h3{
  padding-left: 20px;
  }
  .demo-basic {
  text-align: right;
  }
  .demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  }
  .demo-basic .demo-basic--circle,
  .demo-basic .demo-basic--square {
  display: flex;
  justify-content: flex-end;
  align-items: right;
  }
  .demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
  }
  .demo-basic .block {
  flex: 1;
  }
  .demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
  }
  
  
  </style>